<template>
	<view>
		<view class="promoter-list">
			
			<view style="width: 80px;margin: 15px;">
				<u-button type="primary" text="增加" @click="add()"></u-button>
			</view>
			
			
			<view class='list' v-if="DataList.length">
				<view class="top_num">
					共推广 <text class="main_color">{{count}}</text> 人
				</view>
				<block v-for="(item,index) in DataList" :key="index">
					<view class='item acea-row row-between-wrapper' :class="index == 0 ? 'radius15' : ''">
						<view class="picTxt acea-row row-between-wrapper">
							<view class='pictrue'>
								<image :src='item.avatar'></image>
							</view>
							<view class='text'>
								<view class='name line1'>{{item.username}}  ( UID: {{item.user_id}} )</view>
								<view>加入时间: {{item.add_time}}</view>
							</view>
						</view>
						<view class="right">
							<view><text class='num font-num'>推广 {{item.p ? item.p : 0}}</text>人</view>
							<view><text class="num">共 {{item.o ? item.o : 0}}</text>单</view>
							<view><text class="num">业绩 {{item.yj ? item.yj : 0}}</text>元</view>
							<view><text class="num">返点 {{item.rebate ? item.rebate : 0}}</text>%</view>
						</view>
					</view>
				</block>
			</view>
			
			<view v-if="DataList.length == 0" style="background: #fff;margin: 15px;border-radius: 15px;height: 400px;">
				<u-empty
				        mode="data"
						style="padding-top: 150px;"
				>
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		components: {
		},
		data() {
			return {
				name: '',
				keyword: '',
				DataList: [],
				current: 0,
				hasMore: false,
				loading: true,
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				start: 0,
				stop: 0,
				total: 0,
				grade: 1,
				brokerageLevel: 0,
				down1: 0,
				down2: 0,
				count: 0,
			};
		},
		onShow() {
			this.timeer()
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			setType: function(grade) {
				if (this.grade != grade) {
					this.grade = grade;
					this.DataList = [];
					this.isLoading = false;
					this.scroll = false;
					this.status = 0;
					this.pages = 1;
					this.page = 0;
					this.out = 0;
					this.GetData();
				}
			},
			changeTime(time) {
				//console.log(time)
				this.start = time.start
				this.stop = time.stop
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('CityDistribution/salesmanList', {
						'page': page,
						'limit': this.limit,
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.total = res.data.total
							this.count = res.data.total
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			submitForm() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			add(){
				uni.navigateTo({
					url: '/city/salesman/add'
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	
	.acea-row.row-around {
	    justify-content: space-around;
	    -webkit-justify-content: space-around;
	}
	
	.promoter-list .nav {
		background-color: #fff;
		height: 86rpx;
		line-height: 86rpx;
		font-size: 28rpx;
		color: #282828;
		border-bottom: 1rpx solid #eee;
	}
	
	.promoter-list .nav .item.on{
	    border-bottom: 5rpx solid #2979ff;
	    color: #2979ff;
	}

	.promoter-list .nav .on{
		
	}

	.promoter-list .search {
		width: 100%;
		background-color: #2979ff;
		border-bottom: 1px solid #f2f2f2;
		height: 86rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.promoter-list .search .input {
		width: 100%;
		height: 60rpx;
		border-radius: 50rpx;
		background-color: #f5f5f5;
		position: relative;
	}

	.promoter-list .search .input input {
		height: 100%;
		font-size: 26rpx;
		width: 100%;
		padding-left: 30rpx;
	}

	.promoter-list .search .input .placeholder {
		color: #bbb;
	}

	.promoter-list .search .input .iconfont {
		position: absolute;
		right: 28rpx;
		color: #999;
		font-size: 28rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.promoter-list .search .iconfont {
		font-size: 45rpx;
		color: #515151;
		background-color: #2979ff;
		width: 110rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.promoter-list .list {
		margin-top: 12rpx;
	}

	.promoter-list .list .sortNav {
		background-color: #fff;
		height: 76rpx;
		border-bottom: 1rpx solid #eee;
		color: #333;
		font-size: 28rpx;
	}

	.promoter-list .list .sortNav .sortItem {
		text-align: center;
		flex: 1;
	}

	.promoter-list .list .sortNav .sortItem image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 6rpx;
		vertical-align: -3rpx;
	}

	.promoter-list .list .item {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		height: 152rpx;
		padding: 0 30rpx 0 20rpx;
		font-size: 24rpx;
		color: #666;
		margin: 0 30rpx;
	}

	.promoter-list .list .item .picTxt {
		width: 440rpx;
	}

	.promoter-list .list .item .picTxt .pictrue {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
	}

	.promoter-list .list .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 3rpx solid #fff;
		box-shadow: 0 0 10rpx #aaa;
		box-sizing: border-box;
	}

	.promoter-list .list .item .picTxt .text {
		width: 304rpx;
		font-size: 24rpx;
		color: #666;
	}

	.promoter-list .list .item .picTxt .text .name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 13rpx;
	}

	.promoter-list .list .item .right {
		width: 190rpx;
		text-align: right;
		font-size: 22rpx;
		color: #333;
	}

	.promoter-list .list .item .right .num {
		margin-right: 7rpx;
	}
	.top_num{
		padding: 30rpx;
		font-size: 26rpx;
		color: #666;
	}
	.main_color{
		color: #E93323;
	}
	.radius15{
		border-radius: 14rpx 14rpx 0 0;
	}
	
	.acea-row {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}
	
	.acea-row.row-between-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
	
</style>
